<template>
    <div>
        <div class="header">
            <div style="display: flex;flex-direction:column;width: 100%;">
                <div class="main-title"></div>
                <div class="main-main">
                    <!-- 头像 -->
                    <div class="img-profile">
                        <img src="../../../assets/images/main_icon_head_default.png" v-if="!userInfo.avatar">
                        <img :src="userInfo.avatar" v-else />
                    </div>
                    <div style="width: 80%;word-wrap:break-word;padding: 0 10px;">
                        <div class="nikename">
                            {{ userInfo.memberName ? userInfo.memberName : '微信用户' }}
                        </div>
                        <!-- <div>
                            <span class="usertag1">单位</span>
                            <span class="usertag">职务</span>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <van-cell-group>
            <van-cell title="用户信息" is-link to="/mine/profile" size="large" center>
                <template #icon>
                    <van-icon name="user-o" size="26" style="margin-right: 10px;" />
                </template>
            </van-cell>
            <van-cell title="我的中奖记录" is-link size="large" center to="/mine/winRecord">
                <template #icon>
                    <van-icon name="point-gift-o" size="26" style="margin-right: 10px;" />
                </template>
            </van-cell>
            <van-cell title="我的答题记录" is-link size="large" center to="/mine/replyRecord">
                <template #icon>
                    <van-icon name="todo-list-o" size="26" style="margin-right: 10px;" />
                </template>
            </van-cell>
            <van-cell title="我的分享" is-link size="large" center @click="shareInfo">
                <template #icon>
                    <van-icon name="share-o" size="26" style="margin-right: 10px;" />
                </template>
            </van-cell>
            <!-- <van-cell title="抽奖次数" is-link size="large" center>
                <template #icon>
                    <van-icon name="award-o" size="26" style="margin-right: 10px;" />
                </template>
            </van-cell> -->
        </van-cell-group>
        <van-dialog v-model:show="showShare"  confirm-button-text="确定" @confirm="shareInClipboard">
            <van-image width="100%" height="480px" :src="imgUrl" fit="cover" :show-loading="false" :show-error="false" />
            <!-- <div>提示：长按即可保存图片，保存后请自行发送分享。</div> -->
        </van-dialog>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
const profile = ref("../../../assets/images/main_icon_head_default.png")
import { queryMemberInfo, share } from "@/api/mine.js"
import { showFailToast, showLoadingToast, closeToast, showSuccessToast } from 'vant';

const userInfo = ref({})
const avatar = localStorage.getItem('avatar')
const niceName = localStorage.getItem('niceName')
const showShare = ref(false)
const imgUrl = ref(null)

onMounted(() => {
    getMemberInfo()
})

function getMemberInfo() {
    let openId = localStorage.getItem('token')
    queryMemberInfo(openId).then(res => {
        if (res.code == 200) {
            userInfo.value = res.data || {}
        }
    })
}

function shareInfo() {
    readyShare()
}

function readyShare(type = null) {
    showLoadingToast({
        message: '加载中...',
        forbidClick: true,
    });
    let taskId = localStorage.getItem('taskId')
    let openId = localStorage.getItem('token')
    if (!taskId) {
        closeToast();
        showFailToast('获取信息失败');
        return
    }
    share(taskId, openId).then(res => {
        closeToast();
        if (res.code == 200) {
            imgUrl.value = res.msg
            showShare.value = true
        } else {
            showFailToast('获取信息失败');
            imgUrl.value = null
            showShare.value = false
        }
    })
}

function shareInClipboard(){

}

</script>
<style lang="less" scoped>
.header {
    width: 100%;
    display: flex;
    height: 200px;
    justify-content: center;
    padding: 10px 15px;
    // padding: 40px;
    color: #fff;
    background-image: url('../../../assets/images/mainbg.jpg');
    background-size: 100% 100%;
    box-sizing: border-box;
    margin-bottom: 10px;

    .main-title {
        font-size: 24px;
        justify-items: center;
        text-align: center;
        height: 50px;
    }

    .main-main {
        display: flex;
        justify-items: center;
        align-items: center;
        flex-direction: space-between;
        // white-space: nowrap;
    }

    .usertag {
        font-size: 12px;
        margin-right: 15px;
        // line-height: 1.6;
    }

    .usertag1 {
        // background-color: #cb9a5c;
        // border-radius: 30px;
        // width: 200px;
        font-size: 12px;
        margin-right: 5px;
        // line-height: 1.6;
    }

    .nikename {
        font-size: 16px;
        margin-bottom: 5px;

        .usertag {
            margin-left: 10px;
            border: none;
            display: inline-block;
        }
    }

    .img-profile {
        // margin-left: 160px;
        width: 20%;

        img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            vertical-align: middle;
        }
    }

    .main-setting {
        width: 70px;
        height: 30px;
        background-color: #2648b7;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;

        .setting-btn {
            width: 13px;
            height: 13px;
            margin-right: 13px;
        }

        span {
            font-size: 12px;
        }
    }
}
</style>